<template>
  <a-layout style="height: 100vh">
    <!-- 左侧导航 -->
    <a-layout-sider
      v-model:collapsed="collapsed"
      collapsible
      :trigger="null"
      :theme="navTheme"
      :width="220"
    >
      <div class="logo" />
      <a-menu
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        mode="inline"
        :theme="navTheme"
        :inline-collapsed="collapsed"
        @click="handleMenuClick"
      >
        <template v-for="item in menu_list" :key="item.key">
          <a-menu-item v-if="!item.children" :key="item.key">
            <component :is="item.icon" />
            <span>{{ item.label }}</span>
          </a-menu-item>
          <a-sub-menu v-else :key="item.key" :title="item.label">
            <template #icon>
              <component :is="item.icon" />
            </template>
            <a-menu-item v-for="child in item.children" :key="child.key">
              <span>{{ child.label }}</span>
            </a-menu-item>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>

    <!-- 右侧内容 -->
    <a-layout>
      <!-- 顶部导航 -->
      <a-layout-header class="header">
        <menu-unfold-outlined
          v-if="collapsed"
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <menu-fold-outlined
          v-else
          class="trigger"
          @click="() => (collapsed = !collapsed)"
        />
        <bread-crumb
          class="breadcrumb"
          :titleName="titleName"
          :subtitleName="subtitleName"
          :title_path="title_path"
        />
      </a-layout-header>

      <!-- 内容区域 -->
      <a-layout-content class="content">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  AppstoreOutlined,
  InboxOutlined,
  DesktopOutlined,
} from "@ant-design/icons-vue";
import BreadCrumb from "@/components/BreadCrumb.vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";

const store = useStore();
const router = useRouter();
const route = useRoute();

// 导航状态
const navTheme = ref<"light" | "dark">("dark");
const collapsed = ref(false);
const selectedKeys = ref<string[]>([route.path]);
const openKeys = ref<string[]>([]);

// 菜单数据
interface MenuItem {
  key: string;
  icon: any;
  label: string;
  children?: MenuItem[];
}
const menu_list = ref<MenuItem[]>([]);

// 生成动态菜单
const menu_list_fn = (all_meta_data: any) => {
  const meta_data = all_meta_data.filter((item: any) => item.isMenu === true);
  const userRoles = store.state.roles || [];
  
  const finish_meta = meta_data.filter((item: any) => 
    item.roles.some((role: string) => userRoles.includes(role))
  );

  const iconComponents = {
    AppstoreOutlined,
    InboxOutlined,
    DesktopOutlined,
  };

  return finish_meta.map((item: any) => {
    const menuItem: MenuItem = {
      key: item.title_path,
      icon: iconComponents[item.icon],
      label: item.title,
    };

    if (item.children?.length > 0) {
      menuItem.children = menu_list_fn(item.children);
      if (menuItem.children.length === 0) return null;
    }
    
    return menuItem;
  }).filter(Boolean);
};

// 初始化菜单
const initMenu = () => {
  const allMetaData = router.getRoutes().map(route => route.meta);
  menu_list.value = menu_list_fn(allMetaData);
};

// 自动展开当前路由对应的菜单
const findParentKeys = (path: string) => {
  const result: string[] = [];
  menu_list.value.forEach((item: any) => {
    if (item.children?.some((child: any) => child.key === path)) {
      result.push(item.key);
    }
  });
  return result;
};

// 路由标题信息
const titleName = ref<string>("");
const subtitleName = ref<string>("");
const title_path = ref<string>("");

// 路由变化时更新菜单状态
watch(
  () => route.path,
  (newPath) => {
    selectedKeys.value = [newPath];
    openKeys.value = findParentKeys(newPath);
    titleName.value = route.meta.title as string;
    subtitleName.value = route.meta.sub_title as string;
    title_path.value = route.meta.title_path as string;
  },
  { immediate: true }
);

// 处理菜单点击
const handleMenuClick = ({ key }: { key: string }) => {
  router.push(key);
};

// 保持展开状态
watch(collapsed, (val) => {
  openKeys.value = val ? [] : findParentKeys(route.path);
});

onMounted(() => {
  initMenu();
});
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.trigger {
  font-size: 18px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.breadcrumb {
  margin-left: 20px;
}

.content {
  margin: 24px;
  padding: 24px;
  min-height: 280px;
  background: #fff;
  border-radius: 4px;
}

:deep(.ant-menu-item),
:deep(.ant-menu-submenu-title) {
  display: flex;
  align-items: center;
}

:deep(.anticon) {
  margin-right: 8px;
}
</style>